<template>
 <div class="FollowedArticles">
    <div class="followArticle" v-for="article in this.$store.state.followArticles" :key="article.articleId">
      <div class="followArticle-followName">
        <div class="followName">
           <a>{{article.account}}</a>
        </div>
         <span>
           发布博客1小时前
         </span>
      </div>
      <div class="followArticle-title">
         <a :href="'/articleDetail.html?articleid='+article.articleId" target="_blank">{{article.title}}</a>
      </div>
      <div class="followArticle-footer">
        <div class="followArticle-footer-content">
         <p>{{article.summarize}}</p>
        </div>
        <div class="followArticle-footer-tools">
          <img src="@/assets/icon/点赞.svg" width="20px">
          <span>0</span>
        </div>

      </div>

    </div>
 </div>
</template>

<script>
export default {
  name: "FollowedArticles"
}
</script>

<style>
.FollowedArticles{
  width: 100%;
  height: fit-content;
}
.followArticle{
  width: 100%;
  height: 177px;
  padding: 15px 10px 0px 10px ;
  display: flex;
  flex-direction: column;
  border: 1px solid black;

}
.followArticle-followName{
  width: 220px;
  height: 21px;
  display: flex;
  justify-content: space-between;
  opacity: 0.7;
  font-size: 14px;
}
.followArticle-title{
  width: 100%;
  height: 25px;
  font-size: 18px;
}
.followArticle-title a{
  text-decoration: none;
  color: black;
}
.followArticle-title a:hover{
  border-bottom: 1px solid black;
}
.followArticle-footer{
  width: 100%;
  flex-grow: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.followArticle-footer-content{
  width: 100%;
  height: 21px;
  font-size: 14px;
}
.followArticle-footer-tools{
  width: 50px;
  height: 20px;
  display: flex;
  justify-content: space-between;
}
</style>